<template>
    <div class="hello">
      <SDialog
        :title="('团队消息')"
        :btn1Text="('添加团队')"
        btn1Icon="el-icon-plus"
        :btn1Medthod="addTeam"
        :onCancel="callback"
        :onOK="callback"
      >
        <div class="">
          <el-table align="left" :empty-text="('空')" :data="list">
            <el-table-column
              prop="teamName"
              :label="('团队名称')"
            ></el-table-column>
            <el-table-column prop="memberCount" :label="('成员数量')">
              <template slot-scope="scope">
                <el-button
                  @click="clickToMember(scope.row)"
                  type="text"
                  size="small"
                  >{{ scope.row.memberCount }}</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="itemCount" :label="('项目数量')">
              <template slot-scope="scope">
                <el-button
                  @click="clickToItem(scope.row)"
                  type="text"
                  size="small"
                  >{{ scope.row.itemCount }}</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop :label="('操作')">
              <template slot-scope="scope">
                <el-button
                  @click="clickToMember(scope.row)"
                  type="text"
                  size="small"
                  >{{ ('成员') }}</el-button
                >
                <el-button
                  @click="clickToItem(scope.row)"
                  type="text"
                  size="small"
                  >{{ ('团队项目') }}</el-button
                >
                <el-button
                  v-if="scope.row.team_manage > 0"
                  @click="edit(scope.row)"
                  type="text"
                  size="small"
                  >{{ ('编辑') }}</el-button
                >
                <el-button
                  v-if="scope.row.team_manage > 0"
                  @click="attornDialog(scope.row)"
                  type="text"
                  size="small"
                  >{{ ('转让') }}</el-button
                >
                <el-button
                  v-if="scope.row.team_manage > 0"
                  @click="deleteTeam(scope.row.id)"
                  type="text"
                  size="small"
                  >{{ ('删除') }}</el-button
                >
                <el-button
                  v-if="scope.row.team_manage <= 0"
                  @click="exitTeam(scope.row.id)"
                  type="text"
                  size="small"
                  >{{ ('团队退出') }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </SDialog>
  
      <!-- 添加/编辑团队 -->
      <SDialog
        v-if="dialogFormVisible"
        :onCancel="
          () => {
            dialogFormVisible = false
          }
        "
        :onOK="myFormSubmit"
        width="400px"
      >
        <el-form>
          <el-form-item :label="('团队名称') + ':'">
            <el-input v-model="MyForm.teamName"></el-input>
          </el-form-item>
        </el-form>
      </SDialog>
  
      <SDialog
        v-if="dialogAttornVisible"
        :title="('转让')"
        :onCancel="
          () => {
            dialogAttornVisible = false
          }
        "
        :onOK="attorn"
        width="400px"
      >
        <el-form>
          <el-form-item label>
            <el-input
              :placeholder="('转让用户名')"
              auto-complete="new-password"
              v-model="attornForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item label>
            <el-input
              type="password"
              auto-complete="new-password"
              :placeholder="('输入登录密码')"
              v-model="attornForm.password"
            ></el-input>
          </el-form-item>
        </el-form>
        <p class="tips-text">
          {{ ('转让团队') }}
        </p>
      </SDialog>
  
      <ItemCom
        v-if="dialogItemVisible"
        :teamId="currentOperationRow.id"
        :team_manage="currentOperationRow.team_manage"
        :callback="
          () => {
            dialogItemVisible = false
            geList()
          }
        "
      ></ItemCom>
  
      <MemberCom
        v-if="dialogMemberVisible"
        :teamId="currentOperationRow.id"
        :team_manage="currentOperationRow.team_manage"
        :callback="
          () => {
            dialogMemberVisible = false
            geList()
          }
        "
      ></MemberCom>
  
      <Footer></Footer>
    </div>
  </template>
  
  <script>
  import ItemCom from './Item.vue'
  import MemberCom from './Member.vue'
  import {getList,save} from '@/api/team.ts'

  export default {
    components: { ItemCom, MemberCom },
    props: {
      callback: {
        type: Function,
        required: false,
        default: () => {}
      }
    },
    data() {
      return {
        //展示的团队表
        MyForm: {
          id: '',
          teamName: ''
        },
        list: [],
        dialogFormVisible: false,
        dialogAttornVisible: false,
        attornForm: {
          teamId: '',
          username: '',
          password: ''
        },
        dialogMemberVisible: false,
        dialogItemVisible: false,
        currentOperationRow: {
          id: 0,
          team_manage: 0,
          teamName: ''
        }
      }
    },
    methods: {
      geList() {
        getList().then(data => {
          this.list = data
          // debugger;
        })
      },
      myFormSubmit() {
        save({
          id: this.MyForm.id,
          teamName: this.MyForm.teamName
        }).then(data => {
          this.dialogFormVisible = false
          this.geList()
          this.MyForm = {
            id: '',
            teamName: ''
          }
        })
      },
      edit(row) {
        this.MyForm.id = row.id
        this.MyForm.teamName = row.teamName
        this.dialogFormVisible = true
      },
  
      deleteTeam(id) {
        this.$confirm(('确认删除'), ' ', {
          confirmButtonText: ('确认'),
          cancelButtonText: ('取消'),
          type: 'warning'
        }).then(() => {
          this.request('/team/delete', {
            id: id
          }).then(data => {
            this.geList()
          })
        })
      },
      addTeam() {
        this.MyForm = {
          id: '',
          teamName: ''
        }
        this.dialogFormVisible = true
      },
      goback() {
        this.$router.push({ path: '/item/index' })
      },
      attornDialog(row) {
        this.attornForm.teamId = row.id
        this.dialogAttornVisible = true
      },
      attorn() {
        this.request('/team/attorn', {
          teamId: this.attornForm.teamId,
          username: this.attornForm.username,
          password: this.attornForm.password
        }).then(data => {
          this.dialogAttornVisible = false
          this.geList()
        })
      },
      exitTeam(id) {
        this.$confirm(('团队退出确认'), ' ', {
          confirmButtonText: ('确认'),
          cancelButtonText: ('取消'),
          type: 'warning'
        }).then(() => {
          this.request('/team/exitTeam', { id }).then(data => {
            this.geList()
          })
        })
      },
      clickToMember(row) {
        this.currentOperationRow = row
        this.dialogMemberVisible = true
      },
      clickToItem(row) {
        this.currentOperationRow = row
        this.dialogItemVisible = true
      }
    },
  
    mounted() {
      this.geList()
    },
    beforeDestroy() {}
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .hello {
    text-align: left;
  }
  
  .add-cat {
    float: right;
    margin-right: 15px;
    font-size: 14px;
  }
  
  .center-card {
    text-align: left;
    width: 750px;
    height: 600px;
  }
  
  .goback-btn {
    z-index: 999;
    font-size: 14px;
  }
  </style>
  
  <!-- 全局css -->
  <style>
  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-table__empty-text {
    text-align: left;
    line-height: 30px !important;
    margin-top: 20px;
  }
  </style>
  